<!--
* description: 采购供应商确认-发货
-->
<template>
  <section class="detail">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="明细信息"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="1000px"
      @close="close"
    >
      <dialogHeader
        slot="title"
        title="明细信息"
        :styleType="$store.state.app.dialogType"
      ></dialogHeader>
      <div>
        <el-row :gutter="26" class="mainDetail">
          <component
            v-for="comp in tableComponents.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :validrule="comp.validrule"
            :key="comp.compKey"
            :codeField="comp.codeField"
            :textField="comp.textField"
            :popupsKey="comp.compKey"
            :is="comp.component"
            :code="formField[comp.codeField]"
            :text="formField[comp.textField]"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
            :disabled="comp.disabled"
            :isRequire="comp.isRequire"
            :span="comp.span || 8"
            :isMul="comp.isMul"
            :labelName="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :dateOptionsType="comp.dateOptionsType"
          ></component>
        </el-row>
        <!-- 预计交货时间 -->
        <div
          style="margin: 10px "
          v-if="mainDetailType === 'detailed' ? true : false"
        >
          <span class="calendar">预计交货时间</span>
          <el-date-picker
            v-model="calendar"
         
            type="date"
            placeholder="选择日期"
            @change="calendarChange"
            class="coler"
            :picker-options="pickerOptions0"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <el-row :gutter="34" style="margin: 5px 0">
          <el-col :span="24">
            <div class="dialogTitle">
              <span class="dialogTitleButton">
                <el-button class="iconfont icon-search" @click="queryTable"
                  >查询</el-button
                >

                <el-button class="iconfont icon-reset" @click="reset"
                  >重置</el-button
                >
              

                <el-button
                  class="el-icon-check"
                  @click="save"
                  v-if="mainDetailType === 'detailed' ? true : false"
                  >备件发货</el-button
                >

                <el-button
                  class="el-icon-check"
                  v-if="mainDetailType != 'detailed' ? true : false"
                  @click="exportMain"
                
                  >发货导出
                  </el-button>
                  
                 <el-button
                  class=""
                  v-if="mainDetailType != 'detailed' ? true : false"
                  @click="print()"
                  >打印
                  </el-button>
              </span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="26">
          <el-table
            :data="tableData"
            style="width: 100%"
            height="400"
            border
            v-loading="listLoading"
            @selection-change="onCheckSelectChange"
            class="crmonepage-hello"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" width="60" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="采购单号"
              prop="PURCHASE_CODE"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="采购单行号"
              prop="PURCHASE_LINE_CODE"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="备件编号"
              prop="PART_NO"
              width="120"
              align="center"
            ></el-table-column>
             <el-table-column
              label="零件编号"
              prop="COMPONENTS_NO"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="备件名称"
              prop="PART_NAME"
              width="120"
              align="center"
            ></el-table-column>
            <!-- <el-table-column
              label="采购价格"
              prop="PURCHASE_PRICE"
              width="120"
              align="center"
            ></el-table-column> -->
            <el-table-column
              label="采购数量"
              prop="PURCHASE_QTY"
              width="120"
              align="center"
            ></el-table-column>
            <!-- <el-table-column
              label="采购SNP"
              prop="SNP_IN"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="销售SNP"
              prop="SNP_OUT"
              width="120"
              align="center"
            ></el-table-column> -->
            <el-table-column
              label="已发货数量"
              prop="ARRIVAL_QTY"
              width="120"
              align="center"
            ></el-table-column>
            <!-- 预计到货时间 -->

            <el-table-column
              v-if="mainDetailType === 'detailed' ? true : false"
              label="预计交货时间1"
              width="100%"
              align="center"
            >
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.DELIVERY_TIME"
                  :picker-options="pickerOptions1"
                  type="date"
                  placeholder="选择日期"
                  class="isRequire: true"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <!-- 预计到货时间 -->

            <el-table-column label="发货数量+" width="120" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.ARRIVAL_QTY_NOW"
                  type="text"
                  @input="numChange(scope)"
                  style="width: 100%"
                  class="tableTemplate"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="发货状态"
              prop="SHIPMENTS_STATUS_NAME"
              width="120"
              align="center"
            ></el-table-column>
          </el-table>
          <el-pagination
            ref="oneTable.pageArea"
            background
            :page-sizes="this.$config.pageSizeArray"
            :page-size="this.$config.defaultPageSize"
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper, sizes, ->, total"
            :total="pageTotal"
            :current-page.sync="listQuery.pageIndex"
            :pager-count="7"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
<print v-if="isShowprint" :formField="printdData" @detailClose="detailClose2" :isShow="isShowprint" />

      </div>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </section>
</template>
<script>
import request from "@/utils/request";
import { formMixins } from "@/components/wms/mixins/formMixins";
import JsBarcode from "jsbarcode";
export default {
  // 组件混入对象
  mixins: [formMixins],
  components: {
    dialogHeader: () => import("@/components/dialogHeader"), //弹窗标题
    print: () => import("./print")

  },
  props: {
    isShow: { type: Boolean, default: false },
    mainFormField: { type: Object, default: {} },
    mainDetailType: { type: String, default: "" },
  },
  data() {
    // 日期今天之前不可选
    return {
      printdData:{},
         // 打印弹框的显示与隐藏
      isShowprint:false,

      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      // 动态组件-查询条件
      tableComponents: [
        {
          compKey: "edit_compKey1",
          labelName: "备件编号",
          span: 8,
          codeField: "PART_NO",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
        },
        {
          compKey: "edit_compKey2",
          labelName: "备件名称",
          span: 8,
          codeField: "PART_NAME",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
        },
        {
          compKey: "edit_compKey3",
          labelName: "采购单号",
          span: 8,
          codeField: "PURCHASE_CODE_LIKE",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
        },
      ],
      // 查询条件
      listQuery: {
        pageIndex: 1,
        pageSize: this.$config.defaultPageSize,
      },
      pageTotal: 0,
      // 显示加载中
      listLoading: false,
      // 是否显示
      showDialog: this.isShow,
      // 表格数据
      tableData: [],
      // 选中的数据
      checkTableList: [],
      calendar: "",
      detailLoading: null,
      formField: {
        PART_NO: "",
        PART_NAME: "",
        PURCHASE_CODE_LIKE: "",
      },
    };
  },
  created() {
    if (this.showDialog) {
      this.queryTable();
    }
  },
  methods: {
    detailClose2(){
  this.isShowprint = false
    },
    // 打印方法
       print () {
          if (this.checkTableList.length <= 0) {
        this.$message({
          message: "请勾选一条数据",
          type: "wran",
          uration: 2000
        });
      } else {
        console.log(this.checkTableList);
       this.printdData =  this.checkTableList

         this.isShowprint = true
     
    }
       },
    // 日期
    calendarChange() {
      // console.log(this.calendar);
      this.tableData.forEach((item) => {
        // this.scope.row.DELIVERY_TIME === {}
        if (
          item.DELIVERY_TIME == "" ||
          item.DELIVERY_TIME == null ||
          !item.DELIVERY_TIME
        ) {
          this.$set(item, "DELIVERY_TIME", this.calendar);
        }
      });
    },
    exportMain() {
      if (this.checkTableList.length > 0) {
        let PURCHASE_D_ID = "";
        this.checkTableList.forEach((item) => {
          PURCHASE_D_ID += item.PURCHASE_D_ID + ",";
        });
        PURCHASE_D_ID = PURCHASE_D_ID.substr(0, PURCHASE_D_ID.length - 1);
        request({
          url: "/mp/wm/vl/warehouse/purchase/exportPurchaseD.do",
          method: "post",
          headers: {
            "Cache-Control": "no-cache, no-store,max-age=0, must-revalidate",
            Pragma: "no-cache",
            Expires: "0",
            "Content-Type": "application/json;charset=UTF-8",
          },
          responseType: "blob",
          data: {
            PURCHASE_D_IDS_TWO: PURCHASE_D_ID,
          },
        })
          .then((response) => {
            let blob = new Blob([response], {
              type: "application/vnd.ms-excel",
            }); // 这里表示xmlx类型
            let downloadElement = document.createElement("a");
            let href = window.URL.createObjectURL(blob); // 创建下载的链接
            downloadElement.href = href;
            downloadElement.download = "采购单发货明细导出.xls"; // 下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message({
          message: "请勾选一条数据",
        });
      }
    },
    export(PURCHASE_D_ID, ids) {
      request({
        url: "/mp/wm/vl/warehouse/purchase/exportPurchaseD.do",
        method: "post",
        headers: {
          "Cache-Control": "no-cache, no-store,max-age=0, must-revalidate",
          Pragma: "no-cache",
          Expires: "0",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "blob",
        data: {
          PURCHASE_D_IDS: PURCHASE_D_ID,
          PURCHASE_D_IDS_TWO: ids,
        },
      })
        .then((response) => {
          let blob = new Blob([response], { type: "application/vnd.ms-excel" }); // 这里表示xmlx类型
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob); // 创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "采购单发货明细导出.xls"; // 下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); // 点击下载
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reset() {
      this.formField = {
        PART_NO: "",
        PART_NAME: "",
        PURCHASE_CODE_LIKE: "",
      };
    },
    save() {
      if (this.checkTableList.length > 0) {
        this.detailLoading = this.$loading({
          lock: true,
          text: "正在发货...",
          background: "rgba(0, 0, 0, 0.7)",
          fullscreen: true,
        });
        request({
          url: "/mp/wm/vl/warehouse/purchase/purchaseDeliverGoods.do",
          method: "post",
          data: {
            DeliverGoods: this.checkTableList,
          },
        })
          .then((res) => {
            this.detailLoading.close();
            if (res.result === "1") {
              this.$message({
                message: "发货成功",
                type: "success",
              });
              this.queryTable();

              let PURCHASE_D_ID = res.msg;

              var ids = [];
              for (var i = 0; i < this.checkTableList.length; i++) {
                if (this.checkTableList[i].PURCHASE_TYPE == "03") {
                  var a = this.checkTableList[i].PURCHASE_D_ID;
                  ids.push(a);
                }
              }
              this.export(PURCHASE_D_ID, ids.toString());
            } else {
              this.$message({
                message: res.debugMsg ? res.debugMsg : res.msg,
                type: "warn",
              });
            }
          })
          .catch((err) => {
            this.detailLoading.close();
            console.info(err);
          });
      } else {
        this.$message({
          message: "请选择一条数据",
        });
      }
    },
    //  当选择项发生变化时会触发该事件
    onCheckSelectChange(selection) {
      this.checkTableList = selection;
    },
    // 发货数量change事件
    numChange(scope) {
      scope.row.ARRIVAL_QTY = (scope.row.ARRIVAL_QTY + "").replace(
        /[^\d]/g,
        ""
      );
      // let tmpObj = scope.row;
      // this.$set(this.tableData, index, tmpObj);
    },
    close() {
      this.showDialog = false;
      this.$emit("detailClose");
    },
    // 处理每页显示改变事件
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.queryTable();
    },
    // 当前页记录
    handleCurrentChange(val) {
      this.listQuery.pageIndex = val;
      this.queryTable();
    },
  
    // 查询接口
    queryTable() {
      let reqData = JSON.parse(JSON.stringify(this.listQuery));
      for (let key in this.formField) {
        reqData[key] = this.formField[key];
      }
      reqData.WAREHOUSE_IDS = this.mainFormField.WAREHOUSE_IDS;
      reqData.PARTNER_ID = this.mainFormField.PARTNER_ID;
      if (this.mainDetailType === "detailed") {
        reqData.AUDIT_STATUS = "40";
        reqData.SHIPMENTS_STATUS = "1";
      } else {
        reqData.SHIPMENTS_STATUS_TWO = "10";
      }
      this.listLoading = true;
      request({
        url: "/mp/wm/vl/warehouse/purchase/queryPurchaseDConfirm.do",
        method: "post",
        data: reqData,
      })
        .then((res) => {
          this.listLoading = false;
          if (res.result === "1") {
            if (res.listResult) {
              this.tableData = res.listResult.rows;

              this.pageTotal = res.listResult.records;

              this.tableData.forEach((item) => {
                if (!item.SHIPMENTS_STATUS_NAME) {
                  item.ARRIVAL_QTY = item.PURCHASE_QTY;
                }
              });
            } else {
              this.tableData = [];
              this.pageTotal = 0;
            }
          } else {
            if (res.msg || res.debugMsg) {
              this.$message({
                message: res.debugMsg ? res.debugMsg : res.msg,
                uration: 2000,
              });
            }
          }
        })
        .catch((err) => {
          console.info(err);
          this.listLoading = false;
        });
    },
  },
};
</script>
<style type="text/css" lang="scss" scoped>
/deep/ .mainDetail .el-col .el-input {
  width: calc(100% - 95px);
  height: 26px;
  float: left;
  line-height: 26px;
}
/deep/ .mainDetail label {
  float: left;
  width: 70px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  font-weight: normal !important;
  color: #333;
  border-radius: 2px;
  padding-right: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar {
  font-size: 10px;
  margin-right: -5px;
  padding-right: 6px;
}
 input.el-input__inner {
   width: 214px;
padding-left: 5px;
}
.dialogTitle {
  text-align: left;
  overflow: hidden;
}
.dialogTitleButton {
  float: right;
}
/deep/ .tableTemplate .el-input__inner {
  border: none;
}
</style>
